<template>
  <div class="page-container">
    <div class="page-head" v-if="showMenu">
      <Header ref="headerRef" />
    </div>
    <div class="page-main">
      <router-view v-if="!showMenu" />
      <div class="mian-content" v-else>
        <div class="menu-content">
          <Menu :isCollapse="isCollapse" @updatePoint="updatePoint" />
        </div>
        <div style="flex: 1">
          <div class="flex-content">
            <Breadcrumb @collapseChange="isCollapseFn" />
            <div class="view-content">
              <router-view />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router';
import Header from './components/Header.vue';
import Menu from './components/Menu.vue';
import Breadcrumb from './components/Breadcrumb.vue';

const headerRef = ref(null);

const showMenu = ref(true);

const route = useRoute();

const hideMenuList = ['Login', 'BalanceCheckComplete'];

watch(() => route.path, (newPath) => {
  if (hideMenuList.indexOf(route.name) > -1) {
    showMenu.value = false;
  } else {
    showMenu.value = true;
  }
});

const isCollapse = ref(false)
const isCollapseFn = () => {
  isCollapse.value = !isCollapse.value
}

const updatePoint = () => {
  console.log(111);
  headerRef.value.updateInfo();
}
</script>
<style scoped>
.page-container {
  display: flex; /* 设置为flex容器 */
  flex-direction: column; /* 主轴为垂直方向 */
  height: 100%; /* 容器高度填满父元素 */
}
.page-head {
  height: 60px; /* 头部和底部的高度 */
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.page-main {
  flex-grow: 1; /* main部分自动填充剩余空间 */
}
.mian-content {
  display: flex;
  height: 100%;
}
.menu-content {
  background: var(--background);
}
.flex-content {
  display: flex;
  flex-direction: column;
  height: 100%
}
.view-content {
  /* flex: 1; */
  height: calc(100vh - 108px);
  overflow-y: auto;
  background: var(--background);
}
</style>
